<template>
  <div class="comment-info clear">
    <div class="comment-title">
      <div class="left">用户评价</div>
      <div class="right">更多</div>
    </div>
    <div class="comment-content">
      <div class="content-title">
        <img :src="CommentData.avatvr" alt="">
        <span>{{CommentData.name}}</span>
      </div>
      <div  class="content-info">{{CommentData.content}}</div>
      <div  class="content-other">
        <span>{{CommentData.created}}</span>
        <span>颜色{{CommentData.color}}</span>
        <span>尺码{{CommentData.size}}</span>
      </div>
      <div  class="comment-img" >
        <img :src="item"  alt=""  v-for="item,index in CommentData.imgs.slice(0,3)" :key="index" @load="ImgLoad" >
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "DetailComment",
        props: {
            CommentData: {
                type: Object,
                default() {
                    return {}
                }
            }
        },
        methods:{
            ImgLoad(){
                // console.log('图片加载---');
                this.$bus.$emit('DetailCommentImgLoad')
            },
        },
    }
</script>

<style scoped>
  .comment-info {
    padding: 0 13px ;
    width: 100%;
    /*height: 329px;*/
    margin-bottom: 20px;
  }
  .comment-title {
    height: 44px;
    border-bottom: 1px solid #E0E0E0;
    line-height: 44px;
  }
  .content-title{
    height: 70px;
    width:100%;
    line-height: 70px;
  }
  .content-title img{
    border-radius: 50px;
    width: 50px;
    height: 50px;
    vertical-align: middle;
    margin-right: 8px;
  }
  .content-info{
    font-size: 15px;
    margin-bottom: 10px ;
    padding: 0 10px;
    color: #8E8E8E;
  }
  .content-other {
    font-size: 13px;
    margin-bottom: 10px;
    padding: 0 10px;
    color: #ADADAD	;
  }
  .content-other span{
    margin-right: 8px;
  }
  .comment-img{
    padding: 0 10px;
    width: 100%;
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    height: 80px;
  }
  .comment-img img{
    /*flex: 1;*/
    width: 33%;

    /*width: 80px;*/
    height: 85px;
    padding-right: 1px;
  }
  .clear{
    clear:both;
  }
</style>
